import React, {ReactElement, InputHTMLAttributes, ChangeEvent} from 'react'
import {IconProp} from '@fortawesome/fontawesome-svg-core'
import classNames from 'classnames'
import Icon from '../Icon/icon'

export type InputSize = 'lg' | 'sm'


// 因为InputHTMLAttributes也存在size 属性， 所以可以用Omit 来忽略InputHTMLAttributes 中的size
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'>{
    /**是否禁用 Input */
    disabled ?: boolean;
    /**设置 input 大小，支持 lg 或者是 sm */
    size ?: InputSize;
    /**添加图标，在右侧悬浮添加一个图标，用于提示 */
    icon ?: IconProp;
    /**添加前缀 用于配置一些固定组合 */
    prepend?: string | ReactElement;
    /**添加后缀 用于配置一些固定组合 */
    append?: string | ReactElement;
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
}

const Input: React.FC<InputProps> = (props) => {
    // 1.取出各种属性
    const { disabled, size, icon, prepend, append, children,style, ...restProps} = props

    // 2.根据属性计算不同的className
    const classes = classNames('input-wrapper', {
        [`input-size-${size}`]: size,
        'is-disabled': disabled,
        'input-group': prepend || append,
        "input-group-append": !!append,
        "input-group-prepend": !!prepend
    })

    const fixControlledValue = (value: any) => {
        if(typeof value === 'undefined' || value === null) {
            return ''
        }
        return value
    }
    if('value' in props) {
        delete restProps.defaultValue
        restProps.value = fixControlledValue(props.value)
    }

    return (
        // 3.根据属性判断是否要添加特定的节点
        <div className = {classes} style={style}>
            {prepend && <div className="input-group-prepend">{prepend}</div>}
            {icon && <div className="icon-wrapper"><Icon icon={icon} title={`title`}></Icon></div>}
            <input className="input-inner" disabled={disabled} {...restProps}></input>
            {append && <div className="viking-input-group-append">{append}</div>}
        </div>
    )
    
}

export default Input